<template>
  <CategorySelector></CategorySelector>
  <el-card style="margin-top:10px">
    <div  v-if="isShowAttrList">
    <el-button :icon="Plus" type="primary" @click='toSaveAttrValue'>添加属性</el-button>
    <el-table :data="attrList" style="margin-top:10px" border>
      <el-table-column label="序号" type="index" width="80px" algin="center"></el-table-column>
      <el-table-column label="属性名称" prop="attrName"></el-table-column>
      <el-table-column label="属性值列表">
        <template v-slot="{row}">
          <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" type="success" style="margin-right:8px">{{attrValue.valueName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row,$index}">
          <!-- @click="toEditAttr(row)"修改-->
          <el-button title="修改" size="small" type="warning" :icon="Edit" />
          <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="orange" title="确定要删除此条属性吗?" @confirm="confirmDeleteAttr(row.id)">
            <template #reference>
              <el-button title="删除" size="small" type="danger" :icon="Delete" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- @click="isShowAttrList=true" @click="saveAttrInfo" :disabled="!attrInfo.attrValueList.length" -->
    <!-- <el-button type="primary" >保存</el-button>
    <el-button type="default" >取消</el-button> -->
  <div v-else>
  <el-form>
    <el-form-item label="属性名" style="width:300px">
      <!-- v-model="attrInfo.attrName" -->
      <el-input placeholder="请输入属性名" ></el-input>
    </el-form-item>
    <el-form-item>
      <!-- :disabled="!attrInfo.attrName" @click="addAttrValue" -->
      <el-button type="primary" :icon="Plus" >添加属性值</el-button>
    </el-form-item>
  </el-form>
  <el-table :data='tableData' border style="margin-bottom:10px;">
    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
    <el-table-column label="属性值名称">
      <template>
        <!-- v-if="row.isShowInput" ref="inputRef" v-model="row.valueName"  @blur="deleteCurrentRow(row,$index)"-->
        <el-input  v-if="true"  size="small"></el-input>
        <!-- @dblclick="toEditAttrValue(row,$index)" {{row.valueName}}-->
        <span v-else  style="display:inline-block;width:100%">aaa</span>
      </template>
    </el-table-column>
    <el-table-column label="操作"></el-table-column>
  </el-table>
  <!-- @click="saveAttrInfo" :disabled="!attrInfo.attrValueList.length" -->
  <el-button type="primary" >保存</el-button>
  <el-button type="default" @click="isShowAttrList=true">取消</el-button>
  </div>
  </el-card>
</template>

<script lang='ts'>
export default {
name:'Attr'
}
</script>
<script lang='ts' setup>
import {ref,watch} from 'vue'
import CategorySelector from '@/components/CategorySelector/index.vue'//引入公共组件
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import {useCategoryListStore} from '@/stores/categoryList'//引入categoryList的pinia
import {reqGetAttrListData} from '@/api/product/attr'//引入发请求函数
//切换页面的变量   是否显示属性列表
const isShowAttrList = ref<boolean>(true)
// 获取store实例对象
const categoryStore = useCategoryListStore()
// 定义一个属性列表数组 来存储要渲染的数据
const attrList = ref([])
// 根据一二三级导航获取属性列表数据的函数
const getAttrListData = async ()=>{
  const result = await reqGetAttrListData({
     category1Id:categoryStore.category1Id,
     category2Id:categoryStore.category2Id,
     category3Id:categoryStore.category3Id 
  })
  attrList.value = result
}
// 点击按钮实现添加属性值时的切换
  const toSaveAttrValue = ()=>{
    isShowAttrList.value = false
  }
// 监视三级导航Id
watch(()=>categoryStore.category3Id,()=>{
  getAttrListData()
})











</script>


<style>

</style>